<template>
  <div>
    <h1 class="title">热门歌单推荐</h1>
    <ul>
      <li class="item" v-for="item in list" :key="item.dissid">
        <div class="icon">
          <img v-lazy="item.imgurl">
        </div>
        <div class="text">
          <h2 class="name" v-html="item.dissname"></h2>
          <p class="desc">作者：{{item.creator.name}}</p>
        </div>
      </li>
    </ul>
    <loading class="loading" v-show="!list.length"></loading>
  </div>
</template>

<script>
import Loading from '@/components/loading/loading'
export default {
  name: 'RecommendPlayList',
  props: {
    list: Array
  },
  components: {
    Loading
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/variable'
.title
  color $color-theme
  text-align center
  line-height .8rem
  margin .2rem 0
.loading
  margin-top 20%
.item
  display flex
  padding 0 .4rem .4rem .4rem
  .icon
    flex 0 0 1.2rem
    width 1.2rem
    padding-right .4rem
    img
      width 100%
  .text
    display flex
    flex-direction column
    justify-content center
    font-size $font-size-medium
    flex 1
    .name
      margin-bottom .2rem
      color $color-text
    .desc
      color $color-text-d
</style>
